<template>
  <div>this is div {{ themeState }}</div>
  <button @click="changeThemeState">toggleTheme</button>
  <ThemeTest />
</template>

<script setup lang="ts">
import { provide, ref } from 'vue'
import { THEMEKEY } from './symbolKey'
import type { ThemeType } from './symbolKey'
import ThemeTest from '@/components/ThemeTest.vue'

defineOptions({ name: 'PageTheme' })
// 响应式主题数据
const themeState = ref<ThemeType>('light')

// 切换主题
const changeThemeState = () => {
  themeState.value = themeState.value === 'dark' ? 'light' : 'dark'
}

// 提供响应式数据
provide(THEMEKEY, themeState)
</script>

<style scoped lang="scss"></style>
